<template>

  <!-- 查询部分 -->
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="用户名称">
      <el-input v-model="formInline.loginname" placeholder="请输入用户名称" clearable />
    </el-form-item>
    <el-form-item label="状态">
      <el-select
        v-model="formInline.state"
        placeholder="请选择状态"
        clearable
      >
        <el-option label="请选择" value="" />
        <el-option label="正常" :value="0" />
        <el-option label="冻结" :value="1" />
      </el-select>
    </el-form-item>
    <el-form-item label="出生日期">
      <el-date-picker
        v-model="formInline.startbrithday"
        type="date"
        placeholder="请选择开始日期"
        clearable
      />-
      <el-date-picker
        v-model="formInline.endbrithday"
        type="date"
        placeholder="请选择结束日期"
        clearable
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="LoadUserInfo">查询</el-button>
    </el-form-item>
  </el-form>
  <!-- 数据展示 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="U_LoginName" label="用户名称" width="130" />
      <el-table-column prop="U_TrueName" label="真实姓名" width="130" />
      <el-table-column prop="U_Sex" label="性别" width="130" >
        <template v-slot="scope">
            <span v-if="scope.row.U_Sex">男</span>
            <span v-else>女</span>
        </template>
      </el-table-column>
      <el-table-column prop="U_Birthday" label="出生日期" width="130" >
        <template v-slot="scope">
            <span v-if="scope.row.U_Birthday!=null">{{ moment(scope.row.U_Birthday).format("YY年MM月DD日") }}</span>
            <span v-else>女</span>
        </template>
      </el-table-column>
      <el-table-column prop="U_State" label="状态" width="130" >
        <template v-slot="scope">
          <el-tag v-if="scope.row.U_State==0" type="success">正常</el-tag>
          <el-tag v-if="scope.row.U_State==1" type="danger">冻结</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="UR_Name" label="用户角色" width="130" />
      <el-table-column prop="date" label="操作" width="130" >
        <template v-slot="scope">
          <el-button type="danger" @click="DelUser(scope.row.U_Id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  <!-- 分页部分 -->
    <el-pagination
      v-model:current-page="pageinfo.PageIndex"
      v-model:page-size="pageinfo.PageSize"
      :page-sizes="[1, 2, 5, 10]"
      :size="size"
      background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageinfo.Totalcount"
    />

  </template>
  
  <script lang="ts" setup>
  import { onMounted, ref,reactive, watch } from 'vue';
  import axios from 'axios';
  import moment from 'moment';
  import { ElMessageBox, ElMessage, type ComponentSize } from 'element-plus'

  onMounted(()=>{
    LoadUserInfo()
  })
  //分页

const size = ref<ComponentSize>('default')

      //分页参数
  const pageinfo=ref({
    PageIndex:1,
    PageSize:2,
    Totalcount:0,
    PageCount:0
  })
    //查询条件响应式数据
    const formInline = reactive({
      loginname: '',
      state: '',
      startbrithday: '',
      endbrithday:''
    })

  //用户响应式数据
  const tableData = ref([{
      "U_Id": "",
      "U_LoginName": "",
      "U_LoginPwd": "",
      "U_TrueName": "",
      "U_Sex": true,
      "U_Birthday": "",
      "U_ErrorCount": 0,
      "U_State": 0,
      "U_IsLock": true,
      "U_IsDelete": true,
      "UR_Name": ""
  }])
  //加载用户信息
  const LoadUserInfo=()=>{
    axios.get("/api/User/UserInfo",{
      params:{
        uname:formInline.loginname,
        state:formInline.state,
        startBrithday:formInline.startbrithday,
        endBrithday:formInline.endbrithday,
        pageIndex:pageinfo.value.PageIndex,
        pageSize:pageinfo.value.PageSize
      }
    })
    .then(res=>{
      console.log(res.data.Data)
        tableData.value=res.data.Data.PageData;

        pageinfo.value.Totalcount=res.data.Data.TotalCount;
        pageinfo.value.PageCount=res.data.Data.PageCount;
    })
  }

    //侦听器
    watch(pageinfo,()=>{
      LoadUserInfo()
   },{deep:true})

//删除用户
const DelUser = (uid:string) => {
  ElMessageBox.confirm(
    '确认删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.delete("/api/User/DelUser?uid="+uid)
      .then(res=>{
        if(res.data.Data)
        {
          ElMessage.success("删除成功")
          LoadUserInfo()
        }else{
          ElMessage.error("删除失败")
        }

      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
   const UpdateUser=(uid:string)=>{
    ElMessageBox.confirm(
    '确定删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
    )
    .then(() => {
      axios.delete("/api/User/DelUser?uid="+uid)
      .then(res=>{
        if(res.data.Data)
        {
          ElMessage.success("删除成功")
        }else{
          ElMessage.error("删除失败")
        }

      })
     })
   }


  </script>

  <style>
  .demo-form-inline .el-input {
    --el-input-width: 220px;
  }

  .demo-form-inline .el-select {
    --el-select-width: 220px;
  }
  .demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
  }
  .demo-pagination-block .demonstration {
    margin-bottom: 16px;
  }
  </style>


